<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="(item,index) in breadList" :key="item.path">
        <router-link to="/welcome" v-if="index==0">{{item.meta.title}}</router-link>
        <span v-else>{{item.meta.title}}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted,computed } from "vue";
import { ArrowRight } from '@element-plus/icons-vue'
import {useRoute} from 'vue-router'

const route = useRoute()

const breadList = computed(() => route.matched)
onMounted(() => {
    console.log("route=====>",route.matched)
})

</script>
<style lang="scss" scoped></style>
